<template>
    <el-dialog v-model="DialogShow" append-to-body lock-scroll width="70%" title="批改作业" center
        custom-class="custom_class ">
        <div class="main">
            <el-scrollbar height="70vh">
                <!-- 批改作业 -->
                <vue-office-docx v-if="fileType == 'docx'" :src="props.iframeUrl" style="height: 100%;width: 100%;"
                    @rendered="renderedHandler" @error="errorHandler" />
                <vue-office-pdf v-else-if="fileType == 'pdf'" :src="props.iframeUrl" style="height: 100%;width: 100%;"
                    @rendered="renderedHandler" @error="errorHandler" />
                <!-- 缺醒图 表示不能预览此文件 -->
                <div v-else>
                    <el-empty :image-size="200" :description="`系统展示不支持预览${fileType}文件`" />
                </div>
            </el-scrollbar>
            <!-- 打分框 -->
            <div class="score_box" v-if="props.workRecordId">
                <div class="score_title">
                    分数：
                </div>
                <div class="score_input">
                    <el-input-number v-model="score" :min="0" :max="100" controls-position="right" />
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="DialogShow = false">取消</el-button>
                <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)

import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps(['show', 'workRecordId', 'iframeUrl'])
const emit = defineEmits(['update:show', 'onSubmit'])

import { editHomeworkApi } from "@/api/index";
// 文件类型 只支持 pdf/docx
const fileType = ref(null)
// 使用正则判断props传过来的文件类型
const handleAvatarSuccess = () => {
    // 提取URL中的文件名部分  
    const filename = props.iframeUrl.split('/').pop();

    // 对文件名进行URL解码  
    const decodedFilename = decodeURIComponent(filename);

    // 提取文件扩展名  
    const extension = decodedFilename.split('.').pop();

    return extension.toLowerCase(); // 返回小写形式的扩展名  
}



const DialogShow = ref(false)
watch(() => props.show, (newVal) => {
    console.log(newVal, 'newVal');
    if (!newVal) {
        score.value = 0
    }
    if (newVal) {
        fileType.value = handleAvatarSuccess()
    }
    DialogShow.value = newVal;
});
watch(() => DialogShow.value, (newVal) => {
    emit('update:show', newVal);
});



// 文件读取
const renderedHandler = () => { }
// 读出异常
const errorHandler = () => { }



const score = ref(0)
const submitFun = async () => {
    const res = await editHomeworkApi(props.workRecordId, score.value);
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    ElMessage({
        type: "success",
        message: "打分成功",
    });
    emit('onSubmit')
    DialogShow.value = false;
}
const submitForm = async () => {
    if (score.value == 0) {
        ElMessageBox.confirm("确定给这个作业打0分吗?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(submitFun)
    }
    submitFun()
}


</script>

<style lang="scss">
.main {
    overflow: hidden;

    .score_box {
        display: flex;
        margin-top: 15px;
        justify-content: center;
        align-items: center;

        .score_title {
            font-size: 20px;
            font-weight: 700;
        }

        .score_input {}
    }
}
</style>